<!DOCTYPE html>
<html lang="zh"
    xmlns:th="http://www.thymeleaf.org">
  <head th:replace="common/fragment::top">

  </head>

  <body>
    <div class="lyear-layout-web">
      <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="common/fragment::leftmenu"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="common/fragment::header"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-12">
                <div class="card">
                  <div class="card-body">
                    <form
                        action="#!"
                        class="row"
                        id="icon-form"
                        method="post">
                      <!--                      菜单id-->
                      <input
                          hidden="hidden"
                          id="menuid"
                          name="menuid"
                          th:value="${menu.id}"
                          type="text"/>
                      <!-- 上级菜单-->
                      <div class="input-group m-b-10">
                        <label
                            class="input-group-addon"
                            for="parentMenu">上级菜单
                        </label>
                        <select
                            class="form-control"
                            id="parentMenu"
                            name="parentMenu.id"
                            size="1">
                            <!--/*@thymesVar id="getMenuname" type="com.examplemartin.jpademo.pojo.po.MenuPO"*/-->
                          <option
                              th:each="menuParent:${menuByParent}"
                              th:text="${menuParent.menuname}"
                              th:value="${menuParent.id}" th:attr ="selected=${menuParent.id == menu.parent.id?true:false}"></option>
                        </select>
                      </div>


                      <!--菜单名词-->
                      <div class="input-group m-b-10">
                        <label
                            class="input-group-addon "
                            for="menuname">菜单名称
                        </label>
                        <input
                            class="form-control required"
                            id="menuname"
                            name="menuname"
                            placeholder="请输入菜单名称"
                            th:value="${menu.menuname}"
                            tips="请输入菜单名称"
                            type="text"/>
                      </div>
                      <!--菜单地址-->
                      <div class="input-group m-b-10">
                        <label
                            class="input-group-addon "
                            for="url">菜单URL
                        </label>
                        <input
                            class="form-control"
                            id="url"
                            name="url"
                            placeholder="请输入菜单地址"
                            th:value="${menu.url}"
                            type="text"/>
                      </div>


                      <!--图标-->
                      <div class="input-group m-b-10">
                        <label
                            class="input-group-addon "
                            for="icon">菜单icon
                        </label>
                        <span
                            id="display-select-icon"
                            th:class="'input-group-addon  mdi ' + ${menu.icon}">
                        </span>
                        <input
                            class="form-control input-group-addon"
                            id="icon"
                            name="icon"
                            placeholder="请输入菜单图标"
                            readonly="readonly"
                            th:value="${menu.icon}"
                            type="text"/>
                        <span class="input-group-btn">
                          <button
                              class="btn btn-primary btn-md"
                              data-target="#iconmodel"
                              data-toggle="modal"
                              type="button">选择图标
                          </button>
                        </span>
                      </div>

                      <!--注释-->
                      <div class="input-group m-b-10">
                        <label
                            class="input-group-addon "
                            for="comment">菜单注释
                        </label>
                        <input
                            class="form-control"
                            id="comment"
                            name="comment"
                            placeholder="请输入"
                            th:value="${menu.comment}"
                            type="text"/>
                      </div>


                      <!--菜单排序-->
                      <div class="input-group m-b-10">
                        <label
                            class="input-group-addon "
                            for="position">菜单排序
                        </label>
                        <input
                            class="form-control"
                            id="position"
                            name="position"
                            th:value="${menu.position}"
                            type="number"/>
                      </div>

                      <!--是否显示-->
                      <div class="input-group m-b-10">
                        <label
                            class="input-group-addon "
                            for="display">是否显示
                        </label>
                        <div
                            class="clearfix"
                            id="display">
                          <label class="lyear-radio radio-inline radio-primary">
                            <input
                                name="display"
                                type="radio"
                                value="0">
                            <span>不显示</span>
                          </label>
                          <label class="lyear-radio radio-inline radio-primary">
                            <input
                                checked
                                name="display"
                                type="radio"
                                value="1">
                            <span>显示</span>
                          </label>
                        </div>
                      </div>


                      <div class="form-group col-md-12">
                        <button
                            class="btn btn-primary ajax-post"
                            id="add-icon-btn"
                            target-form="add-form"
                            type="button">确 定
                        </button>
                        <button
                            class="btn btn-default"
                            onclick="history.back(-1);return false;"
                            type="button">返 回
                        </button>
                      </div>
                    </form>

                  </div>
                </div>
              </div>

            </div>

          </div>

        </main>
        <!--End 页面主要内容-->
      </div>
    </div>

    <div th:insert="/common/fragment::tail-script"></div>
    <style>
      td > i {
        height: 24px;
        line-height: 24px;
        text-align: center;
        vertical-align: middle;
        font-size: 24px;
      }

      td:hover {
        background: #cccccc;
        border: red 2px solid;
      }

      #display-select-icon {
        height: 24px;
        line-height: 24px;
        text-align: center;
        vertical-align: middle;
        font-size: 24px;
      }

      .selected-icon {
        border: blue 2px solid;
      }

    </style>

    <!--    图标模态框-->
    <div th:replace="common/iconfragment::iconmodal"></div>
    <!--    END --图标模态框-->
    <script type="text/javascript">
      $(document).ready(function () {

        // 单击图标
        $('.icon-example td').on('click', function () {
          $('.icon-example td i').removeClass('selected-icon')
          $(this).children('i').addClass('selected-icon')
        });

        // 双击图标
        $('.icon-example td').on('dblclick', function () {
          let value = $('.selected-icon').attr('value');
          if (typeof value == "undefined") {
            alert('请选择icon')
          } else {
            $('#icon').attr('value', value)
            let c = 'input-group-addon  mdi ' + value
            let clz = $('#display-select-icon').attr('class')
            $('#display-select-icon').removeClass(clz)
            $('#display-select-icon').addClass(c)
            $('#iconmodel').modal('hide');

          }
        });

        // 关闭模式矿
        $('#save-icon-btn').on('click', function () {
          let value = $('.selected-icon').attr('value');
          if (typeof value == "undefined") {
            alert('请选择icon')
          } else {
            $('#icon').attr('value', value)
            let c = 'input-group-addon  mdi ' + value
            let clz = $('#display-select-icon').attr('class')
            $('#display-select-icon').removeClass(clz)
            $('#display-select-icon').addClass(c)
            $('#iconmodel').modal('hide');

          }

        });

        // 添加icon按钮点击
        $('#add-icon-btn').on('click', function () {
          let id = $('#menuid').val()
          let parentMenu = $('#parentMenu').val()
          let menuname = $('#menuname').val()
          let url = $('#url').val()
          let icon = $('#icon').val()
          let comment = $('#comment').val()
          let position = $('#position').val()
          let display = Boolean($('input[name="display"]:checked').val())

          if (parentMenu == '') {
            confirmMsg('请选择上级菜单')
            return
          }
          if (menuname == '') {
            confirmMsg('请填写菜单名称')
            return
          }
          if (url == '') {
            confirmMsg('请填写菜单url')
            return
          }

          let data = {
            'id': id,
            'menuname': menuname,//菜单名称
            'url': url, // 菜单地址url
            'icon': icon,// 菜单地址icon 图标
            'comment': comment, //菜单注释
            'position': position, //菜单排序
            'display': display, //是否显示
            //上级菜单
            "parent": {
              "id": parentMenu
            }
          }
          //   let data = $('#icon-form').serialize()
          form_ajax(('#icon-form'), '/menu/savemenu.ajax', data,
              '/menu/listmenu.do?d=' + new Date());
        });

      });
    </script>
  </body>
</html>